<template>
	<view>
		<view id="page_content">
			<tui-drawer mode="right" :visible="isopen">
				<headNav @close="closeOpen" @showTips="showTips"></headNav>
			</tui-drawer>
			<view class="page trade_history_page table_page">
				<view class="faq_header">
					<view class="page_header commom_header_share2">
						<view class="back_btn" @click="goBack"></view>
						<view class="header_center">
							<view class="golden-title">{{$t('question')}}</view>
					
						</view>
						<button class="menu_btn" @click="navs('showLeft')">
							<image src="/static/images/entryscreen/menu.svg" mode="widthFix">
						</button>
					</view>
					<view class="faq-mobile-dropdown mobile-view open">
						<tui-dropdown-list :show="dropdownShow" :top="94" :height="400">
							<template v-slot:selectionbox>
								<view class="faq-active-category" @click="dropDownList(-1)">{{$t('blockfaq')}}
									
								</view>
								
							</template>
							<template v-slot:dropdownbox>
								<view class="faq-categories">
									<scroll-view scroll-y class="tui-dropdown-scroll">
										<block v-for="(item,index) in dropdownlistData" :key="index">
												<view class="faq-category" @click="dropDownList(index)">
													{{item.name}}
												</view>
										</block>
									</scroll-view>
								</view>
							</template>
						</tui-dropdown-list>
					</view>
					
				</view>
				
				<view class="faq_content_wrap">
					<block v-for="(item,index) in dataList" :key="index" v-if="show">
						<tui-collapse :index="index" :current="current" :disabled="item.disabled" @click="change" class="faq_content_header">
							<template v-slot:title>
								<tui-list-cell :hover="!item.disabled" class="faq_content_header_desc" backgroundColor="#212a36" arrowColor="white">{{item.name}}</tui-list-cell>
							</template>
							<template v-slot:content>
								<view class="tui-content faq_content_content_desc">{{item.intro}}</view>
							</template>
						</tui-collapse>
					</block>
					<block v-for="(item,index) in dataLists" :key="index" v-if="show2">
						<tui-collapse :index="index" :current="current" :disabled="item.disabled" @click="change" class="faq_content_header">
							<template v-slot:title>
								<tui-list-cell :hover="!item.disabled" class="faq_content_header_desc" backgroundColor="#212a36" arrowColor="white">{{item.name}}</tui-list-cell>
							</template>
							<template v-slot:content>
								<view class="tui-content faq_content_content_desc">{{item.intro}}</view>
							</template>
						</tui-collapse>
					</block>
				</view>
			</view>
		</view>
		<tui-tips ref="toast" position="center"></tui-tips>


	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				show:true,
				show2:false,
				isopen: false,
				showLink: false,
				recordsList: '',
				loadding: false,
				open_wallet: false,
				pullUpOn: true,
				showTabbar: true,
				dropdownShow:false,
				// current: 2,
				page: 1,
				dropdownlistData: [{
					name: this.$t('blockfaq'),
					size: 30
				}, {
					name: this.$t('RHDfaq'),
					size: 30
				}],
				backgroundColor: '#191c1d',
				current: -1,
				dataList: [{
						name:  this.$t('blockfaqask'),
						intro:  this.$t('blockfaqq'),
						current: 0,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask1'),
						intro:  this.$t('blockfaqq1'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask2'),
						intro:  this.$t('blockfaqq2'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask3'),
						intro:  this.$t('blockfaqq3'),
						current: -1,
						disabled: false
					},
					{
						name: this.$t('blockfaqask4'),
						intro:  this.$t('blockfaqq4'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask5'),
						intro:  this.$t('blockfaqq5'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask6'),
						intro: this.$t('blockfaqq6'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask7'),
						intro:  this.$t('blockfaqq7'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask8'),
						intro:  this.$t('blockfaqq8'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask9'),
						intro:  this.$t('blockfaqq9'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask10'),
						intro:  this.$t('blockfaqq10'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('blockfaqask11'),
						intro: this.$t('blockfaqq11'),
						current: -1,
						disabled: false
					}
				],
				dataLists: [{
						name:  this.$t('rhdfaq'),
						intro: this.$t('rhdq'),
						current: 0,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq1'),
						intro: this.$t('rhdq1'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq2'),
						intro: this.$t('rhdq2'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq3'),
						intro: this.$t('rhdq3'),
						current: -1,
						disabled: false
					},
					// {
					// 	name: this.$t('rhdfaq4'),
					// 	intro:  this.$t('rhdq4'),
					// 	current: -1,
					// 	disabled: false
					// },
					{
						name:  this.$t('rhdfaq5'),
						intro: this.$t('rhdq5'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq6'),
						intro: this.$t('rhdq6'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq7'),
						intro: this.$t('rhdq7'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq8'),
						intro:  this.$t('rhdq8'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq9'),
						intro: this.$t('rhdq9'),
						current: -1,
						disabled: false
					},
					{
						name:  this.$t('rhdfaq10'),
						intro:  this.$t('rhdq10'),
						current: -1,
						disabled: false
					}
				
				],
				tabBar: [{
						pagePath: '/pages/dashboard/daq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
			};
		},
		onLoad() {
			if (this.tui.isLogin()) {
				this.hasToken = true;
				this.init();
			}

		},
		methods: {
			tabbarSwitch(e) {

				this.current = e.index;

			},
			showTips: function(msg,type) {
				
				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},
			change(e) {
				this.current = this.current == e.index ? -1 : e.index
			},
			
			dropDownList(index) {
				
				if(index==0){
					this.show = true
					this.show2=false
				}
				if(index==1){
					this.show = false
					this.show2=true
				}
				this.dropdownShow = !this.dropdownShow
				
			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			closeOpen() {

				this.isopen = false
			},
			openShare() {
				this.showLink = true;
			},
			goBack() {
				uni.navigateBack()
			},
			closeLink() {
				this.showLink = false;
			},
			openModel() {
				this.open_wallet = true;
			},
			closePop() {
				this.open_wallet = false;
				this.showTabbar = true
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},
		},
		onReachBottom() {
			
		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		// background-color: #0c0d13;
		background: #0c0d13;
		color: #fff;
		font-family: "Barlow Semi Condensed", sans-serif;
		// margin: 0;
		// padding: 0;
		// overflow: hidden;
	}

	.trade_history_list {
		background-color: #0c0d13;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		// width: 100%;
		// margin-top: 12rpx;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		z-index: 2
	}

	.tui-tool {
		display: flex;
		flex-direction: row;
	}

	.tui-tool-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 15rpx;
		font-size: 24rpx;
		color: #f4d56f;
	}
</style>